<template>
    <div id="aside">
        <b-nav vertical class="w-25" :class="Vnav">
            <b-nav-item>
                <button>
                    click
                </button>
            </b-nav-item>
            <div class="tower">
                <b-nav-item active>卧室</b-nav-item>
                <b-nav-item>客厅</b-nav-item>
                <b-nav-item>儿童房</b-nav-item>
                <b-nav-item>餐厅</b-nav-item>
                <b-nav-item>休闲家具</b-nav-item>
                <b-nav-item>饰品</b-nav-item>
                <b-nav-item>预约设计师</b-nav-item>
                <b-nav-item>客户案例</b-nav-item>
            </div>
        </b-nav>
    </div>
</template>

<script>
export default {
    state(){
        tower: false
    },
    methods: {
        handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > 350) {
                this.tower = true
            } else {
                this.tower = false
            }
        },
    },
    mounted () {
        window.addEventListener('scroll', this.handleScroll)
    },
}

</script>

<style>
    #aside{
        padding: 120px 60px;
        width  : 200px;
        height : 100vh
    }
    .Vnav{
        width      : 115px !important;
        position   : fixed;
        top        : 30%;
        border-left: 1px solid #cccccc
    }
    button{
        position: absolute;
        top     : 150px;
        left    : -50px
    }
    .tower{
        position: relative;
        left    : 0;

    }
    .tower a{
        font-size: 14px;
        color    : #666 !important
    }

</style>
